<template>
  <el-container class="register">
    <el-main>
      <div class="logo">
        <img src="../../static/img/logo.png" alt="">
      </div>
      <div class="change">
        <h3>请选择商家类别</h3>
        <p>
          <el-radio-group v-model="zhuying" @change="chooseType">
            <el-radio :label="0">汽修汽配</el-radio>
            <el-radio :label="1">其它选项</el-radio>
          </el-radio-group>
        </p>
        <span>
          <i class="iconfont icon-yiliaohangyedeICON-"></i>
          <el-select class="xiala" v-model="provinceValue" placeholder="请选择" @change="chooseProvince">
            <el-option
              v-for="item in provinceList"
              :key="item.provinceId"
              :label="item.fullName"
              :value="item.provinceId">
            </el-option>
          </el-select>
          <el-select class="xiala" v-model="cityValue" placeholder="请选择" @change="chooseCity">
            <el-option
              v-for="item in cityList"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId">
            </el-option>
          </el-select>
        </span>


        <el-input v-model="name" placeholder="请输入用户名(不可修改)" prefix-icon="iconfont icon-gerenzhongxin"></el-input>
        <el-input v-model="Pwd" type="password" placeholder="请输入6-16位新密码,数字与字母的组合" prefix-icon="iconfont icon-icon-mima" ></el-input>
        <el-input v-model="repPwd" type="password" placeholder="请再次输入密码" prefix-icon="iconfont icon-mimazhengque" ></el-input>
        <el-input v-model="yaoqingma" placeholder="请输入邀请码(做一年送一年),可不填" prefix-icon="iconfont icon-yaoqingma" ></el-input>
      </div>
      <div class="tip">
        <el-radio v-model="agree"></el-radio>
        <p @click="open">我同意《云商汇平台会员注册协议》</p>
      </div>
      <div class="submitPwd">
        <el-button type="danger" round @click="register" v-loading="loading">同意协议并注册</el-button>
      </div>
      <div class="login">
        <p><i @click="goLogin">立即登录</i></p>
      </div>
    </el-main>
    <div class="show" v-if="show"></div>
    <div class="xieyi" v-if="show">
      <el-main>
        <h5>注册协议</h5>
        <div style="padding:  0 20px" v-html="list"></div>
      </el-main>
      <el-button type="danger" @click.stop="close">确定</el-button>

    </div>
  </el-container>
</template>

<script>
  import qs from 'qs'
  export default {
    inject:['reload'],
    data(){
      return{
        Pwd:'',
        repPwd:'',
        zhuying:2,
        qita:'',
        name:'',
        yaoqingma:'',
        agree:'',
        provinceList:[],//省份列表
        provinceValue:'',//当前选择省份
        cityList:[],//城市列表
        cityValue:'',//当前选择城市
        selectedOptions: [],
        selectedOptions2: [],
        show:false,
        list: {},
        form:{
          userName:'',
          pwd:'',
          majorType:'',
          provinceId:'',
          cityId:'',
          code:'',
          invitationCode:''
        },
        loading:false,

      }
    },
    methods:{
      chooseType(val){
        this.zhuying = val;
        this.form.majorType = val;
        console.log(this.zhuying)
      },
      open(){
        this.show = true
        let data = {
          type:0
        };
        this.$axios.post('api/front/protocol/select',this.qs.stringify(data))
          .then(res=>{
            this.list = res.data.obj.content;
            $(".register").css({overflow:"hidden"})
          })

      },
      close(){
        this.show = false;
        $(".register").css({overflow:"auto"})
      },
      handleChange(value) {
        console.log(value);
      },
      goLogin(){
        this.$router.push('/login')
      },
      register(){
        if(this.zhuying == 2){
          this.$message.warning('请选择商家类别')
          return;
        }else if(this.provinceValue == ''){
          this.$message.warning('请选择地区')
          return;
        }else if(this.cityValue == ''){
          this.$message.warning('请选择城市')
          return;
        }else if(this.name == ''){
          this.$message.warning('请输入用户名')
          return;
        } else if(this.Pwd == ''){
          this.$message.warning('请输入密码')
          return;
        }else if(!/^[\da-zA-Z]{6,16}$/.test(this.Pwd)){
          this.$message.warning('请输入正确格式的密码')
          return;
        }else if(this.repPwd == ''){
          this.$message.warning('请再次输入密码')
          return;
        }else if(this.Pwd != this.repPwd){
          this.$message.warning('两次输入密码不一致，请重新输入')
          return;
        }else if(this.agree == ''){
          this.$message.warning('请仔细阅读协议后同意')
          return;
        }else{
          this.loading = true
          clearTimeout(timer)
          let timer;
          let that = this;
          this.form.userName = this.name;
          this.form.pwd = this.Pwd
          this.form.invitationCode = this.yaoqingma;
          this.form.code = sessionStorage.getItem('code');
          if(localStorage.getItem('openId')){
            this.form.openId = localStorage.getItem("openId");
          }
          console.log(this.form);

          this.$axios.post('/api/front/merchant/add',qs.stringify(this.form))
            .then(res => {
              localStorage.removeItem('isfirstLogin')
              console.log(res.data)
              if(res.data.status != 200){
                this.$message.error(res.data.msg);
                this.loading = false;
                return;
              }
              timer = setTimeout(function () {
                that.loading = false
                  that.$message.success('注册成功')
                  clearTimeout(timer)
                  sessionStorage.removeItem('code');
                  that.$store.commit('getUserId',res.data.obj);
                  localStorage.setItem('session_token',res.data.obj.session_token);
                  localStorage.setItem('infoStatus',res.data.obj.merchant.infoStatus);
                  localStorage.setItem('openId',res.data.obj.merchant.openId);
                  localStorage.setItem('majorType',res.data.obj.merchant.majorType);
                  localStorage.setItem("merchantId",res.data.obj.merchant.merchantId);
                  // that.$store.commit('getSessionToken',res.data.obj.session_token);
                  // that.$store.commit('getOpenId',res.data.obj.merchant.openId)
                  that.$router.push('/indexs')

              },1200)

            })
          // this.$router.push('/')
        }

      },
      chooseProvince(val){
        this.form.provinceId = val;
        let id = parseInt(val)
        let data = {
          provinceId:id
        }
       this.$axios.post('/api/front/city/listByProId',this.qs.stringify(data))
         .then(res => {
           this.cityList = res.data.obj.list;
         })
      },
      chooseCity(val){
         this.form.cityId = val;
      }
    },
    created(){
      this.$axios.post('/api/front/province/all')
        .then(res=>{
          this.provinceList = res.data.obj
        })
    },
    mounted(){

    }
  }
</script>

<style scoped lang="scss">
  .el-container{
    display: flex;
    flex-direction: column;
    height: auto;
    background: #fff!important;
    .el-main{
      width: 90%;
      margin: 0 auto;
      .logo{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 40px 0;
        img{
          width:100px;
          height: 100px;
          border-radius: 50%;
          /*overflow: hidden;*/
        }
      }
      .change{
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        h3{
          font-size: 16px;
          font-weight: normal;
        }
        p{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          margin-bottom: 30px;
          .el-radio-group{
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-around;
          }
        }
        .el-input{
          margin: 5px 0;
        }
        span{
          display: flex;
          flex-direction: row;
          padding-left: 5px;
          i{
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;
            color:#ff0740 ;
          }
          .registerArea{
            margin-left: 7px;
          }
        }
      }
      .tip{
        display: inline-block;
        vertical-align: middle;
        margin: 0 auto;
        margin-top: 40px;
        .el-radio{
          display: inline-block;
          vertical-align: middle;
        }
        p{
          display: inline-block;
          vertical-align: middle;
          margin: 0;
          color: #5193ff;
          font-size: 14px;
        }
      }
      .submitPwd{
        .el-button{
          margin-top: 10px;
          width: 90%;
          font-size: 16px;
        }
      }
      .login{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        text-align: right;
        font-size: 14px;
        margin-bottom: 150px;
        p{
          color: red;
          padding-right: 20px;

        }
      }
    }
    .show{
      width: 100%;
      position: absolute;
      top: 0;
      height: 100%;
      background: #000;
      z-index: 2;
      opacity: 0.5;
    }
    .xieyi{
      position: absolute;
      top:50px;
      height: 80%;
      width: 90%;
      left: 5%;
      background: #fff;
      z-index: 66;
      border-radius: 6px;
      .el-main{
        height: 90%;
        h5{
          font-size: 16px;
        }
        p{
          color: #ccc;
          font-size: 14px;
          margin: 0;
          text-align: left;
          padding: 0 20px;
          text-indent: 28px;
        }
      }

    }
  }
</style>
